<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport"
        content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta content="telephone=no" name="format-detection" />
    <!-- 留作将来统一添加 -->
    <TEMPLATE>${TEMPLATE}</TEMPLATE>
    <title>模板html</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../../css/index.css">
    <link rel="stylesheet" type="text/css" href="../../css/data-flex.min.css">
    <style type="text/css">
        body {
            background: rgba(245, 245, 245, 1);
        }

        .vueApp {
            overflow: hidden;
        }

        .m-container-mod {
            margin: 15px;
            padding: 15px;
            background: rgba(255, 255, 255, 1);
            box-shadow: 0px 1px 8px 0px rgba(0, 0, 0, 0.02);
            border-radius: 8px;
        }

        .btn {
            position: fixed;
            bottom: 0;
            width: 100%;
            height: 50px;
            background: rgba(90, 194, 255, 1);
            font-size: 16px;
            font-weight: 600;
            color: rgba(255, 255, 255, 1);
        }

        .o-list-item {
            height: 50px;
        }

        .c-list-item-title {
            min-width: fit-content;
            font-size: 15px;
            font-weight: 400;
            color: rgba(25, 25, 25, 1);
        }

        .o-list-item-select {
            height: 50px;
        }

        .c-list-item-selectname {
            font-size: 15px;
            font-weight: 400;
            color: rgba(191, 191, 191, 1);
        }

        .c-list-item-arrow {
            width: 17px;
            height: 16px;
            margin-left: 8px;
        }

        .c-list-item-input {
            height: 50px;
            text-align: right;
            font-size: 15px;
            font-weight: 400;
            color: rgba(25, 25, 25, 1);
        }

        .c-list-item-input::placeholder {
            line-height: normal;
            font-size: 15px;
            font-weight: 400;
            color: rgba(191, 191, 191, 1);
        }
    </style>
</head>

<body>
    <div class="vueApp" v-cloak>
        <div class="m-container-mod" style="padding-top: 0;padding-bottom:0">
            <div class="o-list-item" data-flex="main:justify cross:center" @click="openPicker()">
                <div class="c-list-item-title">
                    选择物流公司
                </div>
                <div class="o-list-item-select" data-flex-box="1" data-flex="main:right cross:center">
                    <input class="c-list-item-input" readonly="" :value="companyName" data-flex-box="1" type="text"
                        placeholder="请选择物流公司">
                    <img class="c-list-item-arrow" src="../../image/ui/arrow_right_2.png" alt="">
                </div>
            </div>
        </div>
        <div class="m-container-mod" style="padding-top: 0;padding-bottom:0">
            <div class="o-list-item" data-flex="main:justify cross:center">
                <div class="c-list-item-title">
                    输入物流单号
                </div>
                <input class="c-list-item-input" v-model="orderNum" data-flex-box="1" type="text"
                    placeholder="请输入物流单号">
            </div>
        </div>
        <div class="btn" data-flex="main:center cross:center" @click="submitFn()">
            提交
        </div>
    </div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/service/service-tool.js"></script>
<script type="text/javascript" src="../../script/service/service-app.js"></script>
<script type="text/javascript" src="../../script/service/service-user.js"></script>
<script type="text/javascript" src="../../script/service/service-logic.js"></script>
<script type="text/javascript" src="../../script/jquery.min.js"></script>
<script type="text/javascript" src="../../script/vue.min.js"></script>
<script type="text/javascript">
    // html 的引号一律为双引号(""),js 为单引号('')
    var USER, $S, vm, pageParam;
    apiready = function () {
        $S = SERVICE();
        USER = USER();
        console.log(JSON.stringify(api.pageParam) + '=====pageParam');
        pageParam = api.pageParam;
        fnInit();
    };
    // 初始化
    function fnInit() {
        vm = new Vue({
            el: '.vueApp',
            data: {
                companyName: '',
                companyCode: '',
                orderNum: '',
                companys: ''
            }
        });
        findTransport();
    }

    function pickerCallback(name, code) {
        var sel = { name: name, code: code };
        vm.companyName = sel.name;
        vm.companyCode = sel.code;
    }

    function openPicker() {
        if(!vm.companys.length) {
            fnToast('当前没有快递公司可选');
            return;
        }
        fnOpenFrame({
            name: 'picker',
            url: '../mine/info_layer.html',
            rect: {
                x: 0, y: 0, w: 'auto', h: 'auto'
            },
            pageParam: {
                frameName: api.frameName,
                winName: api.winName,
                listData: vm.companys,
                val: null
            }
        })
    }

    function findTransport() {
        var params = {};
        var url = 'single/oms/order/findOmsExpressCompanyList';
        var callback = function(data) {
            data.forEach(function(item, index) {
                item.name = item.expressCorpName;
                item.code = item.expressCorpId;
                delete item.expressCorpName;
                delete item.expressCorpId;
            });
            vm.companys = data;
        };
        MALLPOST(url, params, callback);
    }

    function submitFn() {
        if(!vm.companyCode) {
            fnToast('请选择快递公司');
            return;
        }
        if(!vm.orderNum) {
            fnToast('请输入快递单号');
            return;
        }
        var params = {
            id: pageParam.id,
            deliveryCompany: vm.companyCode,
            deliverySn: vm.orderNum
        };
        var url = 'single/oms/order/updateOmsOrderReturnApply';
        var callback = function(data) {
            fnToast('提交成功');
            api.execScript({
                name: pageParam.refreshWin,
                frameName: pageParam.refreshFrm,
                script: 'getData();'
            });
            api.closeWin();
        };
        MALLPOST(url, params, callback);
    }
</script>

</html>